<template>
  <div class="home">
    <!-- 轮播图 -->
    <carousel></carousel>
    <div class="message">
      <p>{{ introduce }}</p>
    </div>
    <!-- detail -->
    <div>
      <!-- 指示牌 -->
      <div class="container1">
        <indicatorArrow :title="title1" :msg="message1"></indicatorArrow>
        <div class="treeImg">
          <img :src="item.img" alt="" @mousemove="discoloration(i)" @mouseleave="recovery(i)" v-for="(item,i) in imgList" :key="i">
        </div>
      </div>
      <div class="container2">
        <indicatorArrow :title="title2" :msg="message2"></indicatorArrow>
        <div class="APP">
          <img src="../assets/image/home/img_service.png" alt="">
        </div>
      </div>
      <div class="container3">
        <indicatorArrow :title="title3" :msg="message3"></indicatorArrow>
        <carousel2></carousel2>
      </div>
    </div>
  </div>
</template>

<script>
import Carousel from "../components/carousel.vue";
import Carousel2 from "../components/carousel2.vue";
import indicatorArrow from "../components/indicatorArrow.vue";
import img1 from '../assets/image/home/img_connectg.png'
import img2 from '../assets/image/home/img_integrateg.png'
import img3 from '../assets/image/home/img_shareg.png'
import img11 from '../assets/image/home/img_connectb.png'
import img22 from '../assets/image/home/img_integrateb.png'
import img33 from '../assets/image/home/img_shareb.png'

export default {
  data() {
    return {
      imgList: [ {img: img1}, {img: img2}, {img: img3} ],
      imgList1: [ {img: img1}, {img: img2}, {img: img3} ],
      imgList2: [ {img: img11}, {img: img22}, {img: img33} ],
      title1: "解决方案",
      title2: "APP服务",
      title3: "咨询",
      message1:"为路侧停车位、商超停车场、单位内部停车场、私宅小区停车位等提供一站式、专业的解决方案",
      message2: undefined,
      message3: undefined,
      introduce: '“任意停车”以城市级为基点，通过互联网与高端智能技术，汇集各分散的停车网点数据，进行集中式管理，解决城市停车难题。'
    }
  },
  components: { Carousel, indicatorArrow, Carousel2 },
  methods: {
    // 鼠标移入 变图片
    discoloration(res) {
      this.imgList[res].img = this.imgList2[res].img
    },
    recovery(res) {
      this.imgList[res].img = this.imgList1[res].img
    }
  },
  computed: {},
  created() {},
};
</script>

<style lang="scss" scoped>
.home {
  margin-top: 81px;
}

.message {
  width: 100%;
  height: 80px;
  background-color: #444444;
  text-align: center;
  line-height: 80px;
  > p {
    color: #ffffff;
    font-size: 16px;
  }
}

.container1 {
  background-color: #fff;
  padding-bottom: 106px;
  text-align: center;
  
  > .treeImg > img {
    margin-right: 180px;
  }
  > .treeImg > img:nth-child(3) {
    margin-right: 0px;
  }
}
.container2 {
  background: #fafafa;
  text-align: center;
  padding-bottom: 106px;

  > .APP {

    img {
      margin-top: 110px;
    }
  }
}
.container3 {
  background-color: #fff;
}
</style>
